<template>
  <div id="app">
    <router-view></router-view>
    <tabbal>
      <tabbalitem path="/home">
        <img slot="item-icon" src="./assets/img/tabbar/home.svg" />
        <img
          slot="item-icon-active"
          src="./assets/img/tabbar/home_active.svg"
        />
        <div slot="item-text">首页</div>
      </tabbalitem>
      <tabbalitem path="/category">
        <img slot="item-icon" src="./assets/img/tabbar/category.svg" />
        <img
          slot="item-icon-active"
          src="./assets/img/tabbar/category_active.svg"
        />
        <div slot="item-text">分类</div>
      </tabbalitem>
      <tabbalitem path="/cart">
        <img slot="item-icon" src="./assets/img/tabbar/cart.svg" />
        <img
          slot="item-icon-active"
          src="./assets/img/tabbar/cart_active.svg"
        />
        <div slot="item-text">购物</div>
      </tabbalitem>
      <tabbalitem path="/profile">
        <img slot="item-icon" src="./assets/img/tabbar/profile.svg" />
        <img
          slot="item-icon-active"
          src="./assets/img/tabbar/profile_active.svg"
        />
        <div slot="item-text">我的</div>
      </tabbalitem>
    </tabbal>
  </div>
</template>

<script>
import tabbal from "./components/tabbal/tabbal";
import tabbalitem from "./components/tabbal/tabbalitem";
export default {
  name: "App",
  components: {
    tabbal,
    tabbalitem
  }
};
</script>

<style>
@import "./assets/css/base.css";
</style>
